<template>
  <view class="page">
    <view class='feedback-title'>
      <text>类型</text>
      <radio-group class="radio-group" @change="radioChange">
        <label class="radio">
          <radio value="捡到" checked />捡到
        </label>
        <label class="radio">
          <radio value="丢失" />丢失
        </label>
      </radio-group>
    </view>

    <view class='feedback-title' @tap="chooseAddress">
      <view class="ts-row ts-center">
        <ts-icon type="navigate" size="28" color="#d81e06"></ts-icon>
        <text class="ts-margin-left">位置(请选择或者填写{{type}}物品的地点)</text>
      </view>
    </view>
    <view class="feedback-body">
      <textarea class="feedback-textarea" v-model="sendData.location.address" :placeholder="'请选择或者填写'+type+'物品的地点'" />
      </view>
		<view class='feedback-title'>
			<text>描述</text>
		</view>
		<view class="feedback-body">
			<textarea :placeholder="type+'的物品请详细描述...'" v-model="sendData.content" class="feedback-textarea" />
			</view>
		<view class='feedback-title'>
			<text>图片(选填，总大小10M以下)</text>
		</view>
		<view class="feedback-body">
			<ts-image-uploader @change="handleFileSelected">   
      </ts-image-uploader>
		</view> 
    
		<view class='feedback-title'>
      <view class="ts-row ts-center">
      <ts-icon type="phone" size="28" color="#d81e06"></ts-icon>
			<text class="ts-margin-left">联系电话</text>
      </view>
		</view>
		<view class="feedback-body">
			<input class="feedback-input" v-model="sendData.contact" placeholder="请填写常用的手机号码" />
		</view>
		<button class="feedback-submit" @tap="send">提交</button>	
	</view>
</template>

<script>
import tsImageUploader from 'components/teaset/components/ts-image-uploader/ts-image-uploader.vue';
import tsIcon from 'components/teaset/components/ts-icon/ts-icon.vue';
import tsBadge from 'components/teaset/components/ts-badge/ts-badge.vue';

var self;
export default {
    components: {
        tsImageUploader,
        tsIcon,
        tsBadge
    },
    data() {
        return {
            type: '捡到',
            imageList: [],
            sendData: {
                type: '捡到',
                content: '',
                contact: '',
                location: {
                    name: '',
                    address: '',
                    latitude: '',
                    longitude: ''
                }
            }
        };
    },
    onUnload() {
        this.init();
    },
    onLoad() {
        self = this;
        this.init();

        //获取用户当前的坐标信息
        uni.getLocation({
            type: 'gcj02', //返回可以用于uni.openLocation的经纬度
            success: function(res) {
                console.log(JSON.stringify(res));
                const latitude = res.latitude;
                const longitude = res.longitude;
                self.sendData.location = {
                    latitude: latitude,
                    longitude: longitude,
                    address: `(${latitude},${longitude})`,
                    name: ''
                };
            }
        });
    },
    methods: {
        init() {
            this.imageList = [];
            this.sendData = {
                type: '捡到',
                content: '',
                contact: '',
                location: {
                    name: '',
                    address: '',
                    latitude: '',
                    longitude: ''
                }
            };
        },
        handleFileSelected(e) {
            // console.log(JSON.stringify(e));
            this.imageList = e;
        },
        radioChange(e) {
            // console.log('radio发生change事件，携带value值为：' + e.detail.value);
            this.type = e.detail.value;
            this.sendData.type = e.detail.value;
        },
        chooseAddress() {
            uni.chooseLocation({
                success: function(res) {
                    //                     console.log('位置名称：' + res.name);
                    //                     console.log('详细地址：' + res.address);
                    //                     console.log('纬度：' + res.latitude);
                    //                     console.log('经度：' + res.longitude);
                    if (res) {
                        let { name, address, longitude, latitude } = res;
                        self.sendData.location = { name, address, longitude, latitude };
                        console.log(JSON.stringify(res));
                    }
                }
            });
        },

        async send() {
            //{"type":"捡到","content":"雨伞一把","contact":"18928779564","location":{"name":"番禺区政府","address":"广东省广州市番禺区市桥街清河东路319号","longitude":113.38424,"latitude":22.93772}}
            //console.log(JSON.stringify(this.sendData));
            let imgs = this.imageList.map(value => {
                return {
                    name: 'jjxy.lost-find',
                    uri: value
                };
            });

            // console.log(JSON.stringify(imgs));

            //             //实现图片上传功能
            //             await uni.uploadFile({
            //                 url: 'https://service.dcloud.net.cn/feedback',
            //                 files: imgs,
            //                 formData: self.sendData,
            //                 success: res => {
            //                     if (res.statusCode === 200) {
            //                         uni.showToast({
            //                             title: '上报成功!'
            //                         });
            //                         //将上传得到的路径及其它信息保存到数据库
            //
            //                         self.imageList = [];
            //                         self.sendData = {
            //                             content: '',
            //                             contact: '',
            //                             location: {
            //                                 name: '',
            //                                 address: '',
            //                                 latitude: '',
            //                                 longitude: ''
            //                             }
            //                         };
            //                     }
            //                 },
            //                 fail: res => {
            //                     console.log(JSON.stringify(res));
            //                 }
            //             });

            uni.navigateBack({});
        }
    }
};
</script>

<style>
/*  page view{
    display: flex;
    flex-direction: row;
  } */

.page {
    background-color: #efeff4;
    width: 100%;
    color: #000000;
     flex-direction: column;
}

.input-view {
    font-size: 28upx;
}

/*问题反馈*/

.feedback-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20upx;
    /* color: #8f8f94; */
    font-size: 28upx;
}

.feedback-body {
    background: #fff;
}

.feedback-textarea {
    height: 200upx;
    font-size: 34upx;
    line-height: 50upx;
    width: 100%;
    box-sizing: border-box;
    padding: 20upx 30upx 0;
}

.feedback-input {
    font-size: 34upx;
    height: 50upx;
    min-height: 50upx;
    padding: 15upx 20upx;
    line-height: 50upx;
}

.feedback-submit {
    background: #d81e06;
    color: #ffffff;
    margin: 20upx;
}
</style>
